<template>
  <div class="from_table_box">
    <div class="header_box">
      <div class="tab">
        <div class="tab_item">
          条件管理
        </div>
      </div>
      <div class="button_box">
        <div
          class="el-icon-plus button_item"
          @click="
            () => {
              this.$refs.table_one.addRow();
            }
          "
        >
          &nbsp;添加
        </div>
        <div
          class="el-icon-close button_item"
          @click="
            () => {
              this.$refs.table_one.delRows();
            }
          "
        >
          &nbsp;删除行
        </div>
      </div>
    </div>
    <div class="table_box">
      <vol-table
        v-show="table_one"
        ref="table_one"
        :loadKey="true"
        :columns="columns"
        :height="210"
        :defaultLoadPage="false"
        @loadBefore="loadBefore"
        :endEditAfter="endEditAfter"
        :row-index="true"
        :columnIndex="true"
        :index="true"
        :click-edit="true"
        :tableData="tableData"
        :paginationHide="true"
      ></vol-table>
    </div>
    <vol-box
      :model.sync="model.box"
      title="编辑"
      :height="400"
      :width="500"
      :padding="15"
    >
      <div class="cascader">
        <div class="casd" v-if="IsStaused">
          <span style="font-size:14px;margin-left: 5px;">类型:</span>
          <el-radio v-model="radio" label="1">餐饮</el-radio>
          <el-radio v-model="radio" label="2">酒店</el-radio>
        </div>
        <div class="casd" v-if="IsStaused && radio == 1">
          <span style="font-size:14px;margin-left: 5px;">{{
            radio == 1 ? "餐饮:" : "酒店:"
          }}</span>
          <el-cascader
            ref="cascder"
            v-model="cascaderValueData"
            :options="options"
            clearable
            :props="{
              multiple: true,
              checkStrictly: true
            }"
            @change="changeCasc1"
            filterable
          ></el-cascader>
        </div>
        <div class="casd" v-if="IsStaused && radio == 2">
          <span style="font-size:14px;margin-left: 5px;">
            {{ radio == 1 ? "餐饮:" : "酒店:" }}
          </span>
          <el-select
            v-model="hotelData"
            @change="changeHotel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in hotelTypeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
          <div style="margin-top: 20px;">
            <span style="font-size:14px;margin-left:5px;"
              >房费代码:
              <el-input
              placeholder="请输入房费代码"
              v-model="cascaderValueData" 
              style="width: 195px;"
              clearable>
            </el-input>
              <!-- <el-select
                v-model="cascaderValueData"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择"
              >
                <el-option
                  v-for="item in RoomList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select> -->
          </span>
          </div>

          <!-- <el-cascader
            ref="cascder"
            v-model="cascaderValueData"
            :options="options"
            clearable
            :props="{
              multiple: true,
              checkStrictly: true
            }"
            @change="changeCasc1"
            filterable
          ></el-cascader> -->
        </div>
        <div class="casd" v-if="IsInputStaused">
          <el-input v-model="InputData"></el-input>
        </div>
      </div>
      <div slot="footer">
        <Button type="default" @click="closeChild()">确认</Button>
      </div>
    </vol-box>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from "@/components/basic/VolBox.vue";
import Icons from "@/components/basic/Icons.vue";
import json5, { stringify } from "json5";
export default {
  components: {
    VolTable,
    Icons,
    VolBox
  },
  data() {
    return {
      rowChild: {},
      spare11: 0,
      FormPopup: {
        coupon_value: "",
        type: ""
      },
      props: { multiple: true },
      options: [],
      model: { box: false },
      typeList: [],
      elementIdex: [],
      // 表格显示隐藏
      table_one: true,
      table_two: false,
      coupValuStatused: false,
      couponStatused: false,
      IsStaused: false,
      IsInputStaused: false,
      cascaderValueData: [],
      InputData: "",
      radio: "1",
      hotelData: "",
      hotelTypeList: [],
      RoomList: [],
      RoomData: "",
      objArr: [],
      // 商品管理表格
      tableData: [],
      tableDatabefore: [],
      columns: [
        {
          field: "name",
          title: "条件名称",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
          edit: { type: "text", required: true }
        },
        {
          field: "spare1",
          title: "条件类型",
          type: "int",
          width: 90,
          align: "left",
          sortable: true,
          hidden: false,
          bind: { key: "discount_type", data: [] },
          edit: {
            required: true,
            type: "select",
            key: "discount_type",
            data: []
          }
        },
        {
          field: "spare",
          title: "条件名称",
          type: "string",
          width: 120,
          align: "left",
          hidden: true
        },
        {
          field: "children",
          title: "条件类型",
          type: "decimal",
          width: 90,
          align: "left",
          sortable: true,
          hidden: true
        },

        {
          field: "Render",
          title: "操作",
          fixed: "right",
          width: 160,
          render: this.getRenderOperate()
        }
      ],
      //套票项表格
      ticketTableDataNow: [],
      columnsTicket: [
        {
          field: "id",
          title: "产品ID",
          type: "string",
          width: 120,
          align: "left",
          hidden: true,
          require: true
        },
        {
          field: "goodName",
          title: "商品名称",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
          edit: { type: "text", required: true }
        },
        {
          field: "goodCode",
          title: "商品编码",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true
        },
        {
          field: "hotel_ID",
          title: "酒店id",
          type: "string",
          width: 120,
          align: "left",
          hidden: true
        },
        {
          field: "price",
          title: "平摊价",
          type: "decimal",
          width: 90,
          align: "left",
          sortable: true,
          hidden: false,
          edit: { type: "decimal", required: true }
        },
        {
          field: "number",
          title: "数量",
          type: "int",
          width: 120,
          align: "left",
          hidden: false,
          edit: { type: "number" }
        }
      ]
    };
  },
  created() {
    this.resetSearch(); // 清空表格数据
    this.dataTable();

    this.http
      .get("/api/SupplierNews/GetSupplierProduct", { type: 1 })
      .then(res => {
        if (res.code == 200) {
          this.$nextTick(() => {
            function arrReduce(someArr) {
              for (let i = 0; i < someArr.length; i++) {
                if (someArr[i].children.length != 0) {
                  arrReduce(someArr[i].children);
                  someArr[i].label = someArr[i].label;
                  someArr[i].value = someArr[i].value;
                } else {
                  someArr[i].label = someArr[i].label;
                  someArr[i].value = someArr[i].value;
                  someArr[i].children = null;
                }
              }
              return someArr;
            }
            this.options = arrReduce(res.data);
          });
        }
      });
  },
  methods: {
    // 重置表
    resetSearch() {
      this.table_one = true;
      this.table_two = false;
      this.tableData = [];
    },
    // 表格赋值数据
    dataTable() {
      let that = this.$store.getters.data().reportPrice;
      if (that.currentAction == "Add") {
        console.log("表格渲染add", that.currentAction);
      } else {
        console.log("编辑", that.rowId);
        let params = {
          order: "desc",
          page: 1,
          rows: 100,
          sort: "id",
          wheres: `[{\"name\":\"id\",\"value\":\"${that.rowId}\",\"displayType\":\"text\"}]`
        };
        this.http
          .post("/api/Mall_preferential_scheme/getPageData", params)
          .then(res => {
            if (res.rows[0].json != null) {
              this.tableData = JSON.parse(res.rows[0].json);
            }
          });
      }
    },
    changeCasc1(val) {
      console.log(val, "val");
      if (val.length > 0) {
        this.objArr = [];
        val.forEach(item => {
          // console.log(item[item.length-1])
          this.$refs.cascder.getCheckedNodes().forEach(items => {
            if (item[item.length - 1] == items.path[items.path.length - 1]) {
              let obj = {
                value: items.path[items.path.length - 1],
                label: items.pathLabels[items.pathLabels.length - 1],
                type: this.FormPopup.type,
                discount: this.FormPopup.coupon_value
              };
              this.objArr.push(obj);
            }
          });
        });
      }
    },
    changeHotel(val) {
      this.http
        .get("/api/SupplierNews/GetSupplierProduct", { type: 2, id:val })
        .then(res => {
          // console.log(res, "changeHotel");
          if (res.code == 200) {
            this.RoomList = res.data;
          }else{
            this.$Message.error(res.message);
          }
        });
    },
    //获取下拉酒店名称
    getHotel() {
      this.http
        .post("/api/Dictionary/GetVueDictionary", ["Hotels"])
        .then(res => {
          this.hotelTypeList = [];
          res.forEach(o => {
            if (o.dicNo == "Hotels") {
              o.data.forEach(i => {
                let obj = {
                  value: i.value,
                  key: i.key
                };
                this.hotelTypeList.push(obj);
              });
            }
          });
        });
    },
    loadBefore(params, callback) {
      //设置查询 条件
      var _row;
      //获取主表选中的行
      this.$emit("parentCall", $vue => {
        var rows = $vue.getSelectRows();
        if (rows.length) {
          _row = rows[0];
        }
      });
      if (!_row) {
        //取消选中，清空明细
        return (this.$refs.tableList.rowData.length = 0);
        //  return this.$Message.error("请选中主表行数据");
      }
      //设置查询条件，用主表id加载明细表数据(如果是自己定义的接口，这里条件自己处理)
      params.value = _row.Order_Id;
      //设置排序字段(如果是自己定义的接口，排序字段不一定填写)
      if (!params.sort) {
        params.sort = "CreateDate";
      }
      return callback(true);
    },
    endEditAfter(row) {
      //结束编辑时，可以直接调用后台的代码进行保存
      return true;
    },
    del(row) {
      this.$confirm(
        "确认要删除此行数据【" + row.ProductName + "】？？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认删除",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "提交删除请求"
          });
        })
        .catch(action => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "放弃删除" : "停留在当前页面"
          });
        });
    },
    getRenderOperate() {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: e => {
                  console.log(row, "编辑");
                  this.model.box = true;
                  this.elementIdex = row.elementIdex;
                  this.radio = row.spare4;
                  this.hotelData = row.spare5;
                  this.getHotel();
                  // this.changeHotel(17)
                  if (row.spare1 == 3) {
                    this.IsInputStaused = true;
                    this.IsStaused = false;
                    this.InputData = row.spare;
                  } else {
                    this.IsStaused = true;
                    this.IsInputStaused = false;
                    if(row.spare4 == 2){
                      this.changeHotel(this.hotelData);
                      // console.log(row.children,"row.children")
                      this.cascaderValueData = row.children[0];
                    }else{  this.cascaderValueData = row.children;}
                  
                  }
                }
              }
            },
            "编辑"
          )
        ]);
      };
    },
    closeChild() {
      this.model.box = false;
      this.isOrther();
    },
    //
    isOrther() {
      this.tableData.forEach(item => {
        if (item.elementIdex == this.elementIdex) {
          if (item.spare1 != 3) {
            item.spare4 = this.radio;
            item.spare5 = this.hotelData;
            if (item.spare4 == 2) {
              // this.cascaderValueData.forEach((item)=>{
              //   this.cascaderValue.push(item)
              // })
              item.children = [this.cascaderValueData];
            } else {
              item.children = this.cascaderValueData;
            }
            // item.spare5 = 17
          } else {
            item.spare = this.InputData;
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.casd {
  margin: 20px 5px;
}
.from_table_box {
  background: white;
  margin-top: 15px;
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 3px 15px;
    .tab {
      display: flex;

      .tab_item {
        line-height: 28px;
        font-size: 14px;
        margin-bottom: 0;
        color: #828282;
        padding: 0 8px;
        &.tab_item:hover {
          color: #82aaf1;
          cursor: pointer;
        }
        &.tab_item_click {
          font-weight: bolder;
          border-bottom: 2px solid #03a9f4;
        }
      }
    }
    .button_box {
      display: flex;
      margin-right: 12px;
      .button_item {
        margin-left: 19px;
        line-height: 28px;
        border: 0px;
        color: #009688;
        &.button_item:hover {
          cursor: pointer;
          color: #ff9800;
          border-color: #ff9800;
          border: none;
        }
      }
    }
  }
}

</style>
